<template>
  <div>
    <!--上半边的所有卡片-->
    <el-row :gutter="10">
      <!--常用页面与图片浏览与个人信息-->
      <el-col :span="13">
        <!--常用页面卡片-->
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span
              style="font-size: medium; font-weight: bold; margin-left: 15px"
              >常用页面</span
            >
          </div>
          <div class="bottom clearfix">
            <!--参与单位管理按钮-->
            <router-link to="/notice">
              <el-button style="margin-left: 15px">
                <i class="el-icon-office-building" style="font-size: 28px"></i>
              </el-button>
            </router-link>

            <!--项目统计管理按钮-->
            <router-link to="/department">
              <el-button style="margin-left: 45px">
                <i class="el-icon-folder-opened" style="font-size: 28px"></i>
              </el-button>
            </router-link>

            <!--劳务工程管理按钮-->
            <router-link to="/salary">
              <el-button style="margin-left: 42px">
                <i class="el-icon-notebook-2" style="font-size: 28px"></i>
              </el-button>
            </router-link>

            <!--劳务班组管理按钮-->
            <router-link to="/financial"
              ><el-button style="margin-left: 45px">
                <i class="el-icon-user" style="font-size: 28px"></i> </el-button
            ></router-link>

            <!--工人名册管理按钮-->
            <router-link to="/resources">
              <el-button style="margin-left: 45px">
                <i class="el-icon-notebook-1" style="font-size: 28px"></i>
              </el-button>
            </router-link>

            <!--考勤统计管理按钮-->
            <router-link to="/resourcesApply">
              <el-button style="margin-left: 48px">
                <i class="el-icon-date" style="font-size: 28px"></i>
              </el-button>
            </router-link>

            <!--劳务结算管理按钮-->
            <router-link to="/admin">
              <el-button style="margin-left: 45px">
                <i class="el-icon-s-claim" style="font-size: 28px"></i>
              </el-button>
            </router-link>

            <p>
              <span>参与单位管理</span>
              <span style="margin-left: 22px">项目统计管理</span>
              <span style="margin-left: 22px">劳务工程管理</span>
              <span style="margin-left: 22px">劳务班组管理</span>
              <span style="margin-left: 22px">工人名册管理</span>
              <span style="margin-left: 22px">考勤统计管理</span>
              <span style="margin-left: 22px">劳务结算管理</span>
            </p>
          </div>
        </el-card>
        <!--图片浏览与个人信息卡片-->
        <el-row :gutter="16" style="margin-top: 10px">
          <!--图片浏览卡片(走马灯)-->
          <el-col :span="11"
            ><div class="block">
              <el-carousel type="card" height="230px">
                <el-carousel-item v-for="item in imgList" :key="item.id">
                  <img
                    style="object-fit: scale-down; width: 100%; height: 100%"
                    :src="item.idView"
                    class="image"
                  />
                </el-carousel-item>
              </el-carousel></div
          ></el-col>
          <!--个人信息卡片-->
          <el-col :span="13">
            <el-card class="box-card1" style="height: 250px">
              <div slot="header" class="clearfix1">
                <img v-if="user.avatar" :src="user.avatar" class="avatar" />
                <a
                  href="/add"
                  style="
                    align-items: center;
                    margin-left: 30px;
                    font-size: x-large;
                  "
                  >{{ user?.name }}</a
                >
                <el-tag style="margin-left: 10px">{{ user?.role }}</el-tag>
                <el-tag style="margin-left: 10px">{{ user?.phone }}</el-tag>
                <br /><br /><span
                  style="
                    margin-left: 30px;
                    align-items: center;
                    font-size: medium;
                  "
                  >{{ user.email }}</span
                >
              </div>

              <!--个人信息下面待办事项等-->
              <div class="box-bottom">
                <el-row :gutter="100">
                  <el-col :span="7">
                    <div class="count1">{{ total1 - total4 }}</div>
                  </el-col>
                  <el-col :span="7">
                    <div>
                      <div class="count2">4</div>
                    </div>
                  </el-col>
                  <el-col :span="7">
                    <div class="count3">{{ total3 }}</div>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <span style="font-size: medium; margin-left: 28px"
                      >待办事项
                    </span>
                  </el-col>
                  <el-col :span="8">
                    <div>
                      <span style="font-size: medium; margin-left: 28px"
                        >考勤统计
                      </span>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div>
                      <span style="font-size: medium; margin-left: 28px"
                        >员工人数
                      </span>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>

      <!--右边4个统计卡片-->
      <el-col :span="11">
        <el-row :gutter="16" style="">
          <!--参与单位数量统计卡片-->
          <el-col :span="12">
            <el-card class="box-card" style="height: 200px">
              <span style="font-size: medium; font-weight: bold"
                >参与单位数量
              </span>
              <!--占比-->
              <span
                style="
                  font-size: large;
                  margin-left: 160px;
                  color: cornflowerblue;
                "
                >{{ Math.floor((total6 * 100) / total) }}%</span
              >
              <el-divider></el-divider>
              <!--数量、增长比、完成卡片-->
              <el-row :gutter="2">
                <el-col :span="10">
                  <div class="count4">
                    <span>{{ total }} </span>
                  </div>
                </el-col>
                <el-col :span="14">
                  <el-card
                    class="card1"
                    style="height: 100px; margin-left: 7px"
                  >
                    <span class="c-content1">已认证：{{ total6 }} </span>
                    <br /><br /><span class="c-content2"
                      >待认证：{{ total - total6 }}
                    </span>
                  </el-card>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <!--项目统计数量卡片-->
          <el-col :span="12">
            <el-card class="box-card" style="height: 200px">
              <span style="font-size: medium; font-weight: bold"
                >项目统计数量
              </span>
              <!--占比-->
              <span
                style="
                  font-size: large;
                  margin-left: 160px;
                  color: cornflowerblue;
                "
                >{{ Math.floor((total4 * 100) / total1) }}%</span
              >
              <el-divider></el-divider>
              <!--数量、增长比、完成卡片-->
              <el-row :gutter="2">
                <el-col :span="10">
                  <div class="count4">
                    <span>{{ total1 }} </span>
                  </div>
                </el-col>
                <el-col :span="14">
                  <el-card
                    class="card1"
                    style="height: 100px; margin-left: 7px"
                  >
                    <span class="c-content1">已派工：{{ total4 }} </span>
                    <br /><br /><span class="c-content2"
                      >待派工：{{ total1 - total4 }}
                    </span></el-card
                  >
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="16" style="margin-top: 10px">
          <!--劳务班组统计数量卡片-->
          <el-col :span="12">
            <el-card class="box-card" style="height: 250px">
              <span style="font-size: medium; font-weight: bold"
                >劳务班组统计数量
              </span>
              <!--占比-->
              <span
                style="
                  font-size: large;
                  margin-left: 120px;
                  color: cornflowerblue;
                "
                >{{ Math.floor((total5 * 100) / total2) }}%</span
              >
              <el-divider></el-divider>
              <!--数量、增长比、完成卡片-->
              <div>
                <el-row :gutter="2">
                  <el-col :span="11">
                    <div class="count4">
                      <span>{{ total2 }}</span>
                    </div>
                  </el-col>
                  <el-col :span="13">
                    <el-card class="card1" style="height: 100px">
                      <span class="c-content1">已派工：{{ total5 }} </span>
                      <br /><br /><span class="c-content2"
                        >待派工：{{ total2 - total5 }}
                      </span></el-card
                    >
                  </el-col>
                </el-row>
                <el-row>
                  <el-divider></el-divider>
                  <span style="font-size: medium; margin-left: 15px; color: red"
                    >违规班组： 0</span
                  >
                  <span
                    style="font-size: medium; margin-left: 100px; color: red"
                    >撤销班组：0</span
                  ></el-row
                >
              </div>
            </el-card>
          </el-col>
          <!--上工人数统计数量卡片-->
          <el-col :span="12">
            <el-card class="box-card" style="height: 250px">
              <span style="font-size: medium; font-weight: bold"
                >上工人数统计数量
              </span>
              <!--占比-->
              <span
                style="
                  font-size: large;
                  margin-left: 120px;
                  color: cornflowerblue;
                "
                >100%</span
              >
              <el-divider></el-divider>
              <!--数量、增长比、完成卡片-->
              <div>
                <el-row>
                  <el-col :span="11">
                    <div class="count4">
                      <span>{{ total3 }} </span>
                    </div>
                  </el-col>
                  <el-col :span="13">
                    <el-card class="card1" style="height: 100px">
                      <span class="c-content1">已派工：{{ total3 }} </span>
                      <br /><br /><span class="c-content2"
                        >待派工：0
                      </span></el-card
                    >
                  </el-col>
                </el-row>
                <el-row>
                  <el-divider></el-divider>
                  <span style="font-size: medium; margin-left: 15px; color: red"
                    >违规人员：0</span
                  >
                  <span
                    style="font-size: medium; margin-left: 100px; color: red"
                    >撤销人员：0</span
                  ></el-row
                >
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!--下半边的所有卡片-->
    <el-row :gutter="10" style="margin-top: 10px">
      <!--项目状态分布与预警信息与项目统计-->
      <el-col :span="13">
        <!--项目状态分布与预警信息-->
        <el-row :gutter="16">
          <!--项目状态分布卡片(饼状图)-->
          <el-col :span="12">
            <el-card style="height: 350px">
              <div
                class="echart1"
                ref="mychart1"
                id="mychart1"
                :style="{ float: 'left', width: '100%', height: '350px' }"
              ></div>
            </el-card>
          </el-col>
          <!--预警信息卡片-->
          <el-col :span="12">
            <el-card
              style="
                height: 350px;

                overflow: auto;
                width: 100%;
              "
            >
              <div class="calendar">
                <el-date-picker
                  v-model="selectedDate"
                  type="date"
                  placeholder="选择日期"
                  style="width: 180px"
                  @change="handleDateChange"
                ></el-date-picker>
                <div class="month-header">{{ formattedSelectedDate }}</div>
                <div class="day-grid">
                  <div
                    v-for="day in daysInMonth"
                    :key="day"
                    class="day"
                    :class="{
                      normal: day <= daysInMonth,
                      abnormal: attendanceStatus[day] === 'abnormal',
                      normal: attendanceStatus[day] === 'normal',
                    }"
                    @mouseover="showAttendanceDetails(day)"
                  >
                    {{ day }}
                    <el-tooltip
                      v-if="attendanceStatus[day] === 'abnormal'"
                      class="item"
                      content="异常"
                      placement="bottom"
                    >
                      <i class="el-icon-circle-check"></i>
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!--项目统计卡片(柱状图)-->
      </el-col>

      <!--考勤统计-->
      <el-col :span="11">
        <el-row :gutter="16" style="">
          <el-col :span="24">
            <!--日历卡片-->
            <el-card style="height: 350px">
              <div
                class="echart"
                ref="mychart"
                id="mychart"
                :style="{ float: 'left', width: '100%', height: '320px' }"
              ></div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import moment from "moment";
export default {
  name: "Home1",

  data() {
    const validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请确认密码"));
      } else if (value !== this.user.newPassword) {
        callback(new Error("确认密码错误"));
      } else {
        callback();
      }
    };
    return {
      selectedDate: new Date(), // 当前选中的日期
      daysInMonth: 31, // 当月天数
      attendanceStatus: {}, // 考勤情况

      like: true,
      total: 0, //参与单位总数
      total1: 0, //项目统计数量
      total2: 0, //劳务班组统计数量
      total3: 0, //上工人数
      title: "待办事项",
      title1: "考勤统计",
      title2: "异常提醒",
      dialogVisible: false,
      value: "",
      notices: [],
      user: JSON.parse(localStorage.getItem("xm-user") || "{}"),
      dialogVisible: false,
      imgList: [
        { id: 0, idView: require("@/assets/imgs/图片1.jpeg") },
        { id: 1, idView: require("@/assets/imgs/图片2.jpeg") },
        { id: 2, idView: require("@/assets/imgs/图片3.jpeg") },
        { id: 3, idView: require("@/assets/imgs/图片4.jpeg") },
      ],
      rules: {
        password: [
          { required: true, message: "请输入原始密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        confirmPassword: [
          { validator: validatePassword, required: true, trigger: "blur" },
        ],
      },
    };
  },
  
  computed: {
    formattedSelectedDate() {
      return `${this.selectedDate.getFullYear()}年${
        this.selectedDate.getMonth() + 1
      }月`;
    },
  },
  created() {
    this.generateRandomData();
    this.calculateAttendanceStatus();
    //首页统计待办事项等的方法
    this.$request
      .get("/employee/selectPage", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          username: this.username,
        },
      })
      .then((res) => {
        this.tableData = res.data?.list;
      });
    this.$request.get("/employee/selectAll").then((res) => {
      this.notices = res.data || [];
    });
    this.$request
      .get("/units", {
        params: {
          authentication: 1,
        },
      })
      .then((res) => {
        this.total6 = res.data?.total;
      });
    this.$request.get("/units").then((res) => {
      this.total = res.data?.total;
    });
    this.$request
      .get("/projects", {
        params: {
          dispatch: 1,
        },
      })
      .then((res) => {
        this.total4 = res.data?.total;
      });
    this.$request.get("/projects").then((res) => {
      this.total1 = res.data?.total;
    });
    this.$request.get("/teams").then((res) => {
      this.total2 = res.data?.total;
    });
    this.$request
      .get("/teams", {
        params: {
          attendanceState: 1,
        },
      })
      .then((res) => {
        this.total5 = res.data?.total;
      });
    this.$request.get("/workerInfoByNameTeamsId").then((res) => {
      this.total3 = res.data?.total;
    });
    
  },
  mounted() {
    // 引用饼状图与柱状图函数
    this.initEcharts();
    this.initEcharts1();
  },
  methods: {
    generateRandomData() {
      // 模拟生成随机表格数据
      const randomData = [];
      for (let i = 0; i < 20; i++) {
        const row = {
          teamName: `班组${i + 1}`,
          contractor: `承包人${i + 1}`,
          contact: `联系方式${i + 1}`,
          numberOfWorkers: Math.floor(Math.random() * 100) + 1,
          remark: `备注${i + 1}`,
        };
        randomData.push(row);
      }
      this.tableData = randomData;
      this.totalItems = randomData.length;
    },
    calculateAttendanceStatus() {
      // 模拟生成随机考勤数据
      const randomAttendance = {};
      for (let i = 1; i <= this.daysInMonth; i++) {
        randomAttendance[i] = Math.random() < 0.8 ? "normal" : "abnormal"; // 80%正常，20%异常
      }
      this.attendanceStatus = randomAttendance;
    },
    handleDateChange() {
      // 当日期改变时重新计算考勤情况
      this.calculateAttendanceStatus();
    },
    handleCurrentChange(pageNum) {
      this.currentPage = pageNum;
    },
    //柱状图所用函数
    initEcharts() {
      const option = {
        title: {
          text: "项目统计",
        },
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["product", "已完成", "已派工", "未派工"],
            ["1月", 0, 0, 0],
            ["2月", 2, 3, 4],
            ["3月", 1, 2, 3],
            ["4月", 3, 4, 5],
            ["5月", 5, 3, 2],
            ["6月", 0, 0, 0],
            ["7月", 0, 0, 0],
            ["8月", 0, 0, 0],
            ["9月", 0, 0, 0],
            ["10月", 0, 0, 0],
            ["11月", 0, 0, 0],

            ["12月", 0, 0, 0],
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
      };
      const myChart = echarts.init(this.$refs.mychart); // 图标初始化
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    //饼状图所用函数
    initEcharts1() {
      const option = {
        title: {
          text: "项目状态分布  ",
        },
        tooltip: { trigger: "item" },
        legend: {
          left: "right",
          orient: "vertical",
        },

        series: [
          {
            name: "阶段",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 3, name: "设计阶段" },
              { value: 1, name: "验收阶段" },
              { value: 1, name: "施工阶段" },
              // { value: 484, name: "图例四" },
              // { value: 300, name: "图例五" },
            ],
          },
        ],
      };
      const myChart1 = echarts.init(this.$refs.mychart1); // 图标初始化
      myChart1.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart1.resize();
      });
    },
  },
};
</script>
<style>
/* 常用页面卡片 */
.box-card {
  height: 200px;
  .el-card__header {
    height: 60px;
  }
  .el-divider--horizontal {
    margin: 15px 0;
  }
}
/* 个人信息分割线 */
.clearfix1 {
  height: 80px;
}
/* 图片浏览卡片 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 头像图片样式设置 */
.avatar {
  width: 80px;
  height: 80px;
  display: block;
  border-radius: 50%;
  float: left;
}

/* 待办事项 */
.count1 {
  color: #70e941;
  font-size: xx-large;
  margin-left: 50px;
}
/* 考勤统计 */
.count2 {
  color: #1a3ce3;
  font-size: xx-large;
  margin-left: 45px;
}
/* 上工人数 */
.count3 {
  color: #e31a1a;
  font-size: xx-large;
  margin-left: 40px;
}

/* 124的样式 */
.count4 {
  color: #7ea7eb;
  font-size: xxx-large;
  margin-left: 30px;
  height: 40px;
}

/* 常用页面分割线位置 */
.el-divider--vertical {
  margin-top: 0;
}
/* 个人信息卡片底部信息 */
.box-bottom {
  margin-top: 10px;
}
/* 统计卡片中灰色方块样式 */
.card1 {
  background-color: rgb(236, 236, 236);
  /* 认证信息样式 */
  .c-content1 {
    font-size: medium;
    margin-left: 17px;
    color: rgb(23, 188, 84);
  }
  /* 待认证信息样式 */
  .c-content2 {
    font-size: medium;
    margin-left: 17px;
    color: rgb(233, 48, 72);
  }
}

.calendar {
  margin-bottom: 20px;
}

.month-header {
  text-align: center;
  font-size: 20px;
  margin-bottom: 10px;
}

.day-grid {
  display: grid;
  grid-template-columns: repeat(7, 40px);
  grid-gap: 5px;
}

.normal {
  background-color: #eee;
}

.abnormal {
  background-color: #ffcccc;
}

.table-container {
  width: 80%;
}

.pagination {
  margin-top: 20px;
}
.day {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #ccc;
  cursor: pointer;
  position: relative;
}

.item {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
